<template>
    <div class="person">
        <h2>当前求和为{{ sum }}</h2>
        <button @click="add">点我sum加1</button>
    </div>
</template>

<script setup lang="ts" name="Person">
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    //data
    let sum = ref(0)
    //methods
    function add(){
        sum.value += 1
    }
    //挂载前
    onBeforeMount(()=>{
        console.log("挂载前")
    })
    //挂载完毕
    onMounted(()=>{
        console.log("挂载完毕")
    })
    //更新前
    onBeforeUpdate(()=>{
        console.log("挂载前")
    })
    //更新完毕
    onUpdated(()=>{
        console.log("挂载完毕")
    })
    //卸载前
    onBeforeUnmount(()=>{
        console.log("卸载前")
    })
    //卸载完毕
    onUnmounted(()=>{
        console.log("卸载完毕")
    })
</script>
    
// <!-- //scoped：局部样式，确保.person只对对应文件生效 -->
<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>